<template>
  <div>
    <h1>欢迎来到后台管理系统</h1>
    <el-col>
      <div id="clock">
      <p class="date" align="right">{{ date }}</p>
      </div>
    </el-col>


  </div>
</template>
<script>
  export default {
    data() {
      return {
        radio: '1',
        date: '',
        time: '',
        week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      };
    },
    mounted: function () {
      let _this = this;
      _this.$nextTick(function () {
        setInterval(_this.updateTime, 1000);
      })
    },

    methods: {

      updateTime: function () {
        let _this = this;
        let cd = new Date();
        _this.time = _this.zeroPadding(cd.getHours(), 2) + ':' +
        _this.zeroPadding(cd.getMinutes(), 2) + ':' +
        _this.zeroPadding(cd.getSeconds(), 2);
        _this.date = _this.zeroPadding(cd.getFullYear(), 4) + '-' +
        _this.zeroPadding(cd.getMonth() + 1, 2) + '-' +
        _this.zeroPadding(cd.getDate(), 2) + ' ' +
        _this.week[cd.getDay()];
      },

      zeroPadding: function (num, digit) {
        let zero = '';
        for (let i = 0; i < digit; i++) {
          zero += '0';
        }
        return (zero + num).slice(-digit);
      }
    }
  }
</script>

